<template>
	<view class="">
		<view class="uni-page-head" v-if="titleFlag">
			<image class="common-title-img" style="left: 20rpx;"
				:src="require('../../static/imges/fanhui.png')" @click="back()"></image>
				<!-- <view class="common-title-img">
					<u-icon name="arrow-right" color="#FFFFFF" width="20rpx" height="20rpx" size="48" @click="back()"></u-icon>
				</view> -->
				
				
			<view class="uni-page-head-title">
				验工计价列表
			</view>
		</view>
		<view v-if="titleFlag" style="margin-top: 96rpx;">
			<!-- 这个盒子是用来撑空间，又不想改变下边的body盒子 所以在这加了一个空盒子，可以根据新老MOA判断 -->
		</view>
	<!-- 左侧弹出栏 -->
	<view class="u-demo-area">
		<u-popup border-radius="10" v-model="show" mode="left" length="50%" :mask="true" :closeable="true"
			close-icon-pos="top-right">
	
			<view style="margin-top: 100rpx;">
	
	
	
				<u-cell-group v-for="(item,index) in left_list" :key="index">
					<u-cell-item center :is-link="true" value="" index="index" :arrow="true" :title="item.name"
						icon="list" :icon-style="ic_syl"  @click="queryType(index)">
	
					</u-cell-item>
	
				</u-cell-group>
	
	
			</view>
	
	
			<!-- <view v-if="mode == 'center'" style="height: 200rpx;">
				<view class="close-btn">
					<u-button @click="show = false;" size="medium">关闭弹窗</u-button>
				</view>
			</view>
			<view class="close-btn" v-if="mode != 'center'">
				<u-button size="medium" @click="show = false;">关闭弹窗</u-button>
			</view> -->
		</u-popup>
	</view>
	
	<!-- 右侧弹出栏 -->
	<view class="u-demo-area">
		<u-popup border-radius="10" v-model="show2" mode="right" length="70%" :mask="mask"
			 close-icon-pos="top-left">
			<view style="margin-top: 40rpx;text-align: left;margin-left: 28rpx;">
				<text class="bss-price-title-text" @click="caramButton">项目综合查询</text>
			</view>
			<view style="margin-top: 28rpx;" @click="show3=false;show4=false;show5=false;">
	
				<!--<u-cell-group v-for="(item,index) in right_list" :key="index">
					<u-cell-item center :is-link="true" value="" i ndex="index" :arrow="false">
						 <view class="" v-if="item.num == 3 || item.num == 4 ||item.num == 5"
							style="width: 100%;">
							<view style="text-align: left;">
								<text style="font-size: 30rpx; color:#606266">{{item.name}}</text>
							</view>
	
							<u-input v-model="input_val" type="select" :border="border" @click="show3 = true"
								border-color="#c0c4cc" />
							<u-action-sheet :list="actionSheetList" v-model="show3"
								@click="actionSheetCallback">
							</u-action-sheet>
						</view> 
						<view style="width: 100%;">
							<view style="text-align: left;">
								<text style="font-size: 30rpx;color:#606266">{{item.name}}</text>
							</view>
							<u-input v-model="val" type="text" :border="border" border-color="#c0c4cc" />
						</view>
	
	
					</u-cell-item>
	
				</u-cell-group>-->
				<view style="width: 100%; padding-left: 30rpx; padding-right: 34rpx;">
					<view style="text-align: left;margin: 12rpx 0;">
						<text style="font-size: 32rpx;color:#737373">项目名称</text>
					</view>
					<u-input v-model="xiangmumingcheng" placeholder="请输入关键字" type="text" :border="border" border-color="#FB5C5B" @click="show3=false;show4=false;show5=false;" />
				</view>
				<view style="width: 100%; padding-left: 30rpx; padding-right: 34rpx;">
					<view style="text-align: left;margin: 12rpx 0;">
						<text style="font-size: 32rpx;color:#737373">项目编码</text>
					</view>
					<u-input v-model="xiangmubianhao" type="text" :border="border" border-color="#FB5C5B" @click="show3=false;show4=false;show5=false;"/>
				</view>
				<view style="width: 100%; padding-left: 30rpx; padding-right: 34rpx;">
					<view style="text-align: left;margin: 12rpx 0;">
						<text style="font-size: 32rpx;color:#737373">站址编码</text>
					</view>
					<u-input v-model="zhanzhibianma" type="text" :border="border" border-color="#FB5C5B" @click="show3=false;show4=false;show5=false;" />
				</view>
				<view style="width: 100%; padding-left: 30rpx; padding-right: 34rpx;position: relative;">
					<view style="text-align: left;margin: 12rpx 0;">
						<text style="font-size: 32rpx;color:#737373">项目类别</text>
					</view>
					<u-input style="height: 74rpx;"  v-model="xiangmuleibie" type="select" :border="border" border-color="#FB5C5B" @click="show3 = !show3;show4=false;show5=false" placeholder="请选择" />
					<view class="souSuoIcon" @click.stop="show3 = !show3;show4=false;show5=false">
						<u-icon name="arrow-down" color="#FFFFFF" top="10" size="60"></u-icon>
					</view>
					<view class="selectBox" v-show="show3">
						<view class="selectCell"  @click="actionSheetCallback(index)" v-for="(item,index) in xingMuLeiBieList" :key="index">{{item.name}}</view>
					</view>
				</view>
				<view style="width: 100%; padding-left: 30rpx; padding-right: 34rpx;position: relative;">
					<view style="text-align: left;margin: 12rpx 0;">
						<text style="font-size: 32rpx;color:#737373">项目阶段</text>
					</view>
					<u-input style="height: 74rpx;" v-model="xiangmujieduan" type="select" :border="border" border-color="#FB5C5B" @click="show4 = !show4;show3=false;show5=false;" placeholder="请选择" />
					<view class="souSuoIcon" @click.stop="show4 = !show4;show3=false;show5=false;">
						<u-icon name="arrow-down" color="#FFFFFF" top="10" size="60"></u-icon>
					</view>
					<view class="selectBox" v-show="show4">
						<view class="selectCell"  @click="xiangMuJieDuanCallback(index)" v-for="(item,index) in xingMuJieDuanList" :key="index">{{item.name}}</view>
					</view>
				</view>
				<view style="width: 100%; padding-left: 30rpx; padding-right: 34rpx;position: relative;">
					<view style="text-align: left;margin: 12rpx 0;">
						<text style="font-size: 32rpx;color:#737373">项目年份</text>
					</view>
					<u-input  style="height: 74rpx;" v-model="xiangmunianfen" type="select" :border="border" border-color="#FB5C5B" @click="show5 = !show5;show3=false;show4=false;" placeholder="请选择" />
					<view class="souSuoIcon" @click.stop="show5 = !show5;show3=false;show4=false;">
						<u-icon name="arrow-down" color="#FFFFFF" top="10" size="60"></u-icon>
					</view>
					<view class="selectBox" v-show="show5">
						<view class="selectCell"  @click="xiangMuNianFenCallback(index)" v-for="(item,index) in xingMuNianFenList" :key="index">{{item}}</view>
					</view>
				</view>
			</view>
	
			<!-- <view class="" style="display: flex "> -->
				
		
			<view  style="height: 200rpx;">
				<view class="close-btn">
					<u-button @click="showchongzhi" shape="circle" style="font-size: 32rpx;background-color: #EB4B4B;color: white;height: 68rpx;" size="medium">重置</u-button>
					<u-button size="medium" :plain="true" shape="circle" style="font-size: 32rpx;border: #EB4B4B;color: #EB4B4B;height: 68rpx;" @click="showRight">确定</u-button>
				</view>
			</view>
			<!-- <view class="close-btn" >
				<u-button size="medium" @click="show2 = false;">关闭弹窗</u-button>
			</view>	</view> -->
			<view class="" style="height: 200rpx;width: 100%;"></view>
		</u-popup>
	</view>
	
	
	<!-- 面包屑导航 -->
	<view class="" style="background: #FFFFFF;padding: 24rpx 0 0 24rpx;font-size: 26rpx;">
		<text style="color: #AFAEAC;">当前位置：工程管理 / 验工计价</text>
		<text> / 验工计价列表</text>
	</view>
	
	
	<!-- 列表 -->
	<view class="u-search-box">
		
		<view style="width:10% height:80rpx;margin-top: 9rpx; margin-right:10rpx;">
			<view @click="leftJump()">
				<u-icon name="list" size="50" color="#EB4B4B"></u-icon>
			</view>
	
		</view>
	
		 <view class="u-search-inner"> 
			<u-icon name="search" color="#909399" :size="28"></u-icon>
			 
			<u-input v-model="searchValueer"  height="30" placeholder="项目编码、项目名称、站址编码"/>
		</view> 
		
		
		
		<view style="display: flex;  width:20% height:80rpx;margin-left: 2rpx;">
			<view class="l-label" @click="sousuo()">搜索</view>
			<image @click="rightJump()" style="width: 38rpx;height: 44rpx;margin-top: 10rpx;margin-left: 9rpx;"
				src="../../static/imges/loudou2.png" mode=""></image>
			
		</view>
	
	</view>
	
	
	
	
	<view class="swiper-item">
		<scroll-view scroll-y style="height: 80%; width: 100%;" @scrolltolower="reachBottom">
			<view class="page-box" style="margin-bottom: 80rpx;">
				<view class="order" v-for="(item, index) in prjInfo" :key="index">
					<view class="" @click="jump_detail(item.prjId)">
				
						<view class="top">
							<view class="left">
								<image style="width: 40rpx;height:40rpx; margin-top: 3rpx;" src="../../static/imges/zuobiao.png"
									mode=""></image>
								<!-- <u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon> -->
								<view class="store" ><text :selectable="true">{{ item.prjYear + item.siteName  + item.buildMode + item.prjTypeName}}</text></view>
								<!-- <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon> -->
							</view>
							<view class="right">
								<!-- 代码复制图标 -->
								<!-- <view class="" @click.stop="copyTextButton('项目名称：' + item.prjName + '； 项目编码：' + item.prjCode + '； 站址名称：' + item.siteName + '； 站址编码：' + item.siteId)">
									<u-icon label-pos="bottom" label-size="8rpx" name="order" color="#2979ff" size="28"></u-icon>
								</view> -->
								
								<!-- <view class="" >
									<image style="width: 40rpx;height:40rpx; margin-top: 3px;" src="../../static/imges/zuobiao.png"
										mode=""></image>
								</view> -->
								<view class="right-title" style="">
									{{ item.prjTypeName }}
								</view>
								
							</view>
						</view>
						<view class="item">
							<view class="content" style="position:relative;width: 100%;">
								<view class="title u-line-2 type">项目名称：<text :selectable="true">{{ item.prjName }}</text></view>
								<view class="type">项目编码：<text :selectable="true">{{ item.prjCode }}</text></view>
								<view class="type">站址名称：<text :selectable="true">{{ item.siteName }}</text></view>
								<view class="type">站址编码：<text :selectable="true">{{ item.siteId }}</text></view>
								<!-- <view style="color: black;display: flex;position: absolute;right: 0;bottom: 0rpx;">
									<view style="margin-top: 6rpx;">
										<image style="width: 30rpx;height: 32rpx;"src="/static/imges/weizhi.png"></image>
									</view>
								    <text space="nbsp">{{""}}55.99km</text>
								</view> -->
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
			</view>
		
		</scroll-view>
	</view>
	
	</view>
</template>

<script>
	import talkingdata from '../../common/talkingdata.js';
	export default {
	data() {
		return {
			searchValueer:"",
			searchValue:'',
			show :false,
			show2: false,
			show3:false,
			show4:false,
			show5:false,
	loadStatus: ['loadmore', 'nomore','loadmore','loadmore'],
	prjInfo: [],
		border: true,
		mask: true, // 是否显示遮罩
		
		xiangmumingcheng:'',
		xiangmubianhao:'',
		zhanzhibianma:'',
		xiangmunianfen:'',
		xiangmujieduan:'',
		xiangmuleibie:'',
		prjStage:'',
		prjType:'',
		//zuo侧数据
		
		pageIndex:0,
		xingMuLeiBieList:[
			{
				name:'铁塔类项目',
				code:'A'
			},
			{
				name:'室分类项目',
				code:'B'
			},
			{
				name:'传输类项目',
				code:'C'
			},
			{
				name:'技术创新类项目',
				code:'D'
			},
			{
				name:'综合办公类项目',
				code:'E'
			},
			{
				name:'IT类项目',
				code:'F'
			},
			{
				name:'微站类项目',
				code:'G'
			},
			{
				name:'能源类项目',
				code:'J'
			},
			{
				name:'拓展类项目',
				code:'L'
			},
			{
				name:'IT投资类项目',
				code:'M'
			},
			{
				name:'IT费用类项目',
				code:'N'
			},
			{
				name:'整体项目',
				code:'Z'
			},
		],
				xingMuJieDuanList:[
			{
				name:'实施',
				code:'E'
			},
			{
				name:'验收',
				code:'F'
			},
		],
		titleFlag:true,
		
		xingMuNianFenList:[
			'2015',
			'2016',
			'2017',
			'2018',
			'2019',
			'2020',
			'2021',
		],
		left_list: [
			{
				name: "全部",
				code:'A'
			},
			{
				name: "立项",
				code:'B'
			},
			{
				name: "可研",
				code:'C'
			},
			{
				name: "设计",
				code:'D'
			},
			{
				name: "实施",
				code:'E'
			},
			{
				name: "验收",
				code:'F'
			},
			{
				name: "决算",
				code:'G'
			},
			{
				name: "关闭",
				code:'o'
			},
		],
		ic_syl: {
			color: '#EB4B4B'
		},
		}
		}, 
		onLoad() {
		if(uni.getStorageSync('moaType')=="0"){
				this.titleFlag=false
		}	
			
		this.getList();
			
		},
		onReady(){
			console.log("执行onReady")
			
			//在页面挂载完成后，调用外部埋点，统计数据
			 const script= document.createElement('script');
			 script.type = 'text/javascript';
			 script.src = talkingdata.talkingKey;
			 document.body.appendChild(script);
			
		},
		watch:{
			// searchValueer(){
			// 	this.searchValue=this.searchValueer;
			// 	console.log("长度：",this.searchValueer.length);
			// 	this.prjInfo=[];
			// 	setTimeout(() => {
			// 		this.pageIndex=0,
			// 		// 清空另一个搜索框
			// 		this.showchongzhi()
			// 		this.getList();
			// 	}, 500);
				
			// },
		},
		methods: {
			sousuo(){
				this.searchValue=this.searchValueer;
				this.prjInfo=[];
				this.pageIndex=0,
				// 清空另一个搜索框
				this.showchongzhi()
				this.getList();
			},
			back() {
				
				uni.navigateBack({
					delta: 1
				});
			},
			// 添加 复制按钮 函数
			copyTextButton(val){
			    let result
			    // #ifndef H5
			    uni.setClipboardData({
			      data: val,
			      success() {
			        result = true
			      },
			      fail() {        
			        result = false        
			      }
			    });
			    // #endif
			    
			    // #ifdef H5 
			      let textarea = document.createElement("textarea")
			      textarea.value = val
			      textarea.readOnly = "readOnly"
			      document.body.appendChild(textarea)
			      textarea.select() // 选中文本内容
			      textarea.setSelectionRange(0, val.length) 
			      result = document.execCommand("copy") 
			      textarea.remove()    
			    // #endif
				uni.showToast({
				    title: '已复制到剪切板',
				    duration: 1500
				});
			      return result
			  },
			
			
			
			leftJump() {
				console.log("点击一下")
			
				this.show = true;
			
			},
			rightJump() {
				console.log("点击一下2222")
			
				this.show2 = true;
			
			},
			
			jump_detail(id){
				uni.navigateTo({
					url: './detail?prjId='+id
				});
			},
			
			showchongzhi(){
				this.xiangmumingcheng=''
				this.xiangmubianhao=''
				this.zhanzhibianma=''
				this.xiangmunianfen=''
				this.xiangmujieduan=''
				this.xiangmuleibie=''
				this.prjStage=''
				this.prjType=''
			},
			showRight(){
				this.show2 = false;
				this.prjInfo=[];
				this.pageIndex=0;
				this.searchValue = '';
				this.getList();
			},
			queryType(index){
				this.show = false;
				this.showchongzhi()
				this.searchValue = ''
				this.prjStage = this.left_list[index].code == 'A' ? '' : this.left_list[index].code;
				
				this.prjInfo=[];
				this.pageIndex=0,
				this.getList();
			},
			reachBottom() {
				// 此tab为空数据
				console.log("分页触发")
				this.pageIndex=Number(this.pageIndex)+10//在此处加10
				setTimeout(() => {
					this.getList();
				}, 300);
				
			},
			/**
			 * @author: MrLiu
			 * @time: 2021-09-15
			 * @Title: 获取项目列表
			 */
			getList() {
				console.log("出发"+this.searchValue)
				
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				// this.params = "{'prjName':'" + this.searchValue +
				// 	"','prjCode':'" + this.xiangmubianhao +
				// 	"','beginNum':'" + this.pageIndex +
				// 	"','pageNum':'" + this.pageSize +
				// 	"'}";
				uni.request({
					url: uni.getStorageSync('url') + "/pms/app/service/queryValuationPrjList",
					method: 'POST',
					dataType: 'json',
					timeout: 10000 * 60,
					header: {
						'pmsToken': uni.getStorageSync('pmsToken')
					},
					data: {
						prjCode: this.xiangmubianhao,
						prjName: this.xiangmumingcheng,
						siteId: this.zhanzhibianma,
						beginNum:this.pageIndex,
						pageNum:"10",
						prjYear: this.xiangmunianfen,
						prjType: this.prjType,
						prjStage: this.prjStage,
						queryParm: this.searchValue
						
						//param: this.params
					},
					success: (res) => {
						uni.hideLoading();
						console.log('获取项目列表数据:' + JSON.stringify(res));
						//console.log('URL:' + uni.getStorageSync('url') + url);
						var data = res.data;
						if (data.resultStat == "000") {
							
							if (0 == data.prjInfo.length) {
								this.showLoadMore = true; 
								
								uni.showModal({confirmColor: '#eb4b4b',
									title: '温馨提示',
									content: "没有更多数据!",
									showCancel:false,
								})
							}
							//console.log('子数据:' + JSON.stringify(data.prjInfo));
							this.prjInfo = this.prjInfo.concat(data.prjInfo);
							
						}else{
							uni.showModal({confirmColor: '#eb4b4b',
								title: '温馨提示',
								content: JSON.stringify(data),
								showCancel:false,
							})
						}
			
						uni.hideLoading();
						uni.stopPullDownRefresh();
			
					},
					fail: (data, code) => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						console.log('fail' + JSON.stringify(data));
					}
				});
			
			},
			// 点击搜索项目类别的回调
			actionSheetCallback(index) {
				console.log(index)
				this.show3 = false
				this.xiangmuleibie = this.xingMuLeiBieList[index].name;
				this.prjType = this.xingMuLeiBieList[index].code;
			},
			//点击项目阶段的回调
			xiangMuJieDuanCallback(index){
				console.log(index)
				this.show4 = false
				this.xiangmujieduan = this.xingMuJieDuanList[index].name;
				this.prjStage = this.xingMuJieDuanList[index].code;
			},
			//点击项目年份的回调
			xiangMuNianFenCallback(index){
				console.log(index)
				this.show5 = false
				this.xiangmunianfen = this.xingMuNianFenList[index];
			},
			// 调用相机
			caramButton(){
				console.log('调用相机');
				uni.chooseImage({
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['camera'], //从相册选择
				    success: function (res) {
				        // console.log(JSON.stringify(res.tempFilePaths));
				        // console.log(res.tempFilePaths);
				    },
					fail:function(error){
						console.log(111111,error)
					}
				});
			}
			
			
		},
		}
</script>
<style>
	@import '@/common/common-ui.css';
	.u-search-box {
		width: 100%;
		padding: 18rpx 15rpx;
		background-color: white;
		display: flex;
		
	}
	
	.u-search-inner {
		background-color: rgb(204, 234, 234);
		width: 86%;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
		background-color: white;
		border:solid 1px gray
	}
	
	.u-search-text {
		//height: 35px;
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}
	
	.l-label {
		width: 90rpx;
		height: 60rpx;
		border-radius:10rpx;
		margin-top: 2rpx;
		text-align: center;
		line-height:55rpx ;
		margin-left: 5px;
		border: 1.5px solid #EB4B4B;
		color: #EB4B4B;
		
	}
	
	.l_count {
		display: flex;
		justify-content: space-around;
		margin-top: 8px;
	}
	
	.l_text {
		width: 80px;
		text-align: center;
	}
	
</style>
<style scoped lang="scss">
	.u-demo-area {
		margin: 0 -40rpx;
	}
	.swiper-item {
		height: 100%;
	
	}
	.swiper-box {
		flex: 1;
		height: 100%;
		margin-top: 160rpx;
	}
	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
	
		.top {
			display: flex;
			justify-content: space-between;
	        width: 100%;
			.left {
				display: flex;
				align-items: center;
	
				.store {
					width: 90%;
					margin: 0 10rpx;
					font-size: 28rpx;
					font-weight: bold;
				}
			}
	
			.right {
				display: flex;
				justify-content: flex-end;
				min-width: 33%;
				//color: $u-type-warning-dark;
				.right-title{
					min-width: 170rpx;
					height: 50rpx;
					color: #eb4b4b;
					line-height: 50rpx;
					 text-align: center;
					border: 1px solid #eb4b4b;
					border-radius: 25rpx;
					font-weight: bold;
				}
			}
		}
	
		.item {
			display: flex;
			margin: 20rpx 0 0;
	
			.left {
				margin-right: 20rpx;
	
				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}
	
			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}
	
				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}
	
				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}
	
			.right {
				
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;
	
				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}
	
				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}
	
		
	
		
	}
	
	.bss-price-title-text {
		height: 48rpx;
		font-size: 40rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		/* color: #FFFFFF; */
		/* color: #FFFFFF; */
		line-height: 48rpx;
		text-align: left;
	}
	.close-btn {
		// height: 100%;
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.selectBox{
		border: 1rpx solid #c0c4cc;
		position: absolute;
		width: 465rpx;
		z-index: 999;
		background-color: #FFFFFF;
		border-radius: 0 0 10rpx 10rpx;
		padding: 0 0 10px 0;
		
		.selectCell{
			border-bottom: 1rpx solid #FC8C8B;
			text-align: left;
			margin: 0 20rpx;
			font-size: 16px;
			color: #939393;
		}
	}
	.souSuoIcon{
		width: 100rpx;
		height: 74rpx;
		position: absolute;
		right: 33rpx;
		top: 68rpx;
		border-radius: 0 5px 5px 0;
		background: #FB5C5B;
	}
</style>
